<template>
  <el-dialog :title="$t('collectDetail.sendMessage')" :visible.sync="showState" :before-close="handleClose" :modal="false" width="50%">
    <el-button-group>
      <el-button :type="type === 1 ? 'primary' : ''" @click="setType(1)">{{ $t('collectDetail.friendInfo') }}</el-button>
      <el-button :type="type === 2 ? 'primary' : ''" @click="setType(2)">{{ $t('collectDetail.addressBook') }}</el-button>
    </el-button-group>
    <el-row style="margin-top: 20px">
      <el-table
        ref="singleTable"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        :data="type === 1 ? userContactData : phoneData"
        border
        height="263"
        style="width: 100%"
        highlight-current-row
        @current-change="handleCurrentChange"
      >
        <el-table-column
          fixed="left"
          prop="contactName"
          :label="$t('collectDetail.name')"
          min-width="150"
        />
        <el-table-column
          fixed="left"
          prop="contactPhone"
          :label="$t('collectDetail.phone')"
          min-width="150"
        />
        <el-table-column
          prop="phoneNumStatus"
          :label="$t('authModule.contactPerson.status')"
        >
          <template slot-scope="scope">
            {{ scope.row['phoneNumStatus'] !== null ? $t('authModule.contactPerson.state')[scope.row['phoneNumStatus']] : '' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="modifyTime"
          :label="$t('authModule.contactPerson.lastUpdated')"
          min-width="170"
        />
        <el-table-column
          prop="modifyOperatorName"
          :label="$t('authModule.contactPerson.updater')"
          min-width="150"
        />
        <el-table-column
          :label="$t('authModule.contactPerson.operation')"
          min-width="250"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="setContactState(scope.row, 1)">{{ $t('authModule.contactPerson.connectedNot') }}</el-button>
            <el-button type="text" @click="setContactState(scope.row, 2)">{{ $t('authModule.contactPerson.shutdown') }}</el-button>
            <el-button type="text" @click="setContactState(scope.row, 3)">{{ $t('authModule.contactPerson.emptyNumber') }}</el-button>
            <el-button type="text" @click="setContactState(scope.row, 4)">{{ $t('authModule.contactPerson.knowNot') }}</el-button>
            <el-button type="text" @click="setContactState(scope.row, 5)">{{ $t('authModule.contactPerson.available') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-form ref="formValidate" :model="formValidate" :rules="rules" label-width="150px" class="demo-ruleForm" style="margin-top: 20px;">
      <el-form-item :label="$t('collectDetail.addPhone')" prop="phoneCall">
        <el-input
          v-model="formValidate.phoneCall"
          clearable
          type="tel"
          :placeholder="$t('collectDetail.inputPhone')"
          :maxlength="20"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">{{ $t('common.operate.cancel') }}</el-button>
      <el-button type="primary" :loading="submitLoading" @click="handleSubmit">{{ $t('common.operate.sure') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'PhoneDialog',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    userContactData: {
      type: Array,
      default: function() {
        return []
      }
    },
    phoneData: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      submitLoading: false,
      type: 1,
      formValidate: {
        phoneCall: null
      },
      currentRow: null,
      rules: {
        phoneCall: [{ required: true, message: this.$t('collectDetail.inputPhone'), trigger: 'blur' }]
      }
    }
  },
  computed: {
    showState: {
      get: function() {
        return this.showDialog
      },
      set: function() {
      }
    }
  },
  mounted() {
    this.para = this.$route.query
  },
  methods: {
    handleClose() {
      this.$emit('change-dialog', 'isPhone', false)
      setTimeout(() => {
        this.formValidate = {
          phoneCall: null
        }
      }, 10)
    },
    handleSubmit() {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          this.$emit('call-phone', this.formValidate.phoneCall)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    setContactState(item, index) {
      this.$emit('set-contact-state', item, index)
    },
    handleCurrentChange(val) {
      this.currentRow = val
      this.formValidate.phoneCall = val['contactPhone']
    },
    setType(type) {
      this.type = type
      setTimeout(() => {
        let item = []
        if (type === 1) {
          item = this.userContactData.filter(v => {
            return this.formValidate.phoneCall === v['contactPhone']
          })
        } else {
          item = this.phoneData.filter(v => {
            return this.formValidate.phoneCall === v['contactPhone']
          })
        }
        this.currentRow = item
      }, 100)
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-select{
    width: 100%;
  }
  .admin-tree{
    margin-top: 20px;
  }
</style>
